<template>
    <div class="tags-content" ref="tagsContentDom">
        <div class="show" ref="showDom">
            <TransitionGroup :css="false" @enter="item_EnterEvent" @leave="item_LeaveEvent">
                <div v-for="(item, index) in curTags.filter(u => u.state == 1)" :key="index" class="item b"
                    @click="show_ClickEvent(item.id)">
                    {{ item.title }}
                </div>
            </TransitionGroup>
            <div class="item b item-show" @click="set_ClickEvent" v-if="!setState">设置</div>
            <div class="item r item-show" @click="set_ClickEvent" v-else>完成</div>
        </div>
        <div class="select">
            <div class="text" v-if="setState">选择区</div>
            <div class="select-content">
                <TransitionGroup :css="false" @enter="item_EnterEvent" @leave="item_LeaveEvent">
                    <div class="item" v-for="(item, index) in curTags.filter(u => u.state != 1)" :key="index"
                        :class="item.state == 0 ? 'b' : 'r'" @click="select_ClickEvent(item.id)">
                        {{ item.title }}
                    </div>
                </TransitionGroup>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { getTagList_API } from '@/axios/api/tag.js'
import gsap from 'gsap'

const setState = ref(false);
const curTags = ref([]);//当前的tags
const allTags = ref([]);//总的tags

const props = defineProps({
    curData: {
        type: {},
        default: {},
    }
});

const emits = defineEmits(['heightChange', 'change']);

onMounted(() => {
    curTags.value = props.curData;
    for (let i = 0; i < curTags.value.length; i++) {
        const element = curTags.value[i];
        element.state = 1;
    }
    getHeight();
});


//#region anmia
let anmiaIndex = 0;
const item_EnterEvent = (el, done) => {
    gsap.to(el, {
        delay: 0.03 * anmiaIndex,
        padding: '3 10',
        duration: 0.3,
        opacity: 1,
        onComplete: done,
    });
    anmiaIndex++;
}
const item_LeaveEvent = (el, done) => {
    gsap.to(el, {
        delay: 0.03,
        duration: 0.3,
        opacity: 0,
        onComplete: done,
    });
}
//#endregion

//去除tag的点击事件
const show_ClickEvent = (id) => {
    const cur = curTags.value.find(u => u.id == id);
    //删掉
    if (cur) {
        if (cur.old)//判断是否是需要删除还是回恢复
            cur.state = 2;
        else
            cur.state = 0;
    }
    getHeight();
}

//选择区的tag点击事件
const select_ClickEvent = (id) => {
    const cur = curTags.value.find(u => u.id == id);
    //添加回去
    if (cur) {
        cur.state = 1;
    }
    getHeight();
}

//实时计算高度
const tagsContentDom = ref();
const showDom = ref();
const getHeight = () => {
    anmiaIndex = 0;
    setTimeout(() => {
        const h = showDom.value.clientHeight + 25;
        if (setState.value) {
            emits('heightChange', h + 200);
        } else
            emits('heightChange', h);
    }, 100);
}

//设置/完成的点击的事件
const set_ClickEvent = () => {
    setState.value = !setState.value;
    const add = [];
    const del = [];
    if (!setState.value) {
        for (let i = 0; i < curTags.value.length; i++) {
            const element = curTags.value[i];
            if (element.state == 1 && !element.old) {
                add.push(element.id);
            } else if (element.state == 2) {
                del.push(element.id);
            }
        }
        emits('change', {
            add: add,
            del: del,
            success: loadSuccess,//执行成功的回调
            error: loadError,
        })
        // loadTag(add, del);
    } else {
        if (allTags.value.length <= 0) {
            getTagList_API({
                type: 2,
            }).then(res => {
                allTags.value = res.result.traits;
                setTagState();
            })
        } else {
            setTagState();
        }
    }
}
//上传成功的回调
const loadSuccess = (data = []) => {
    const newTags = [];
    for (let i = 0; i < data.length; i++) {
        const element = data[i];
        const tag = allTags.value.find(u => u.id == element);
        if (tag) {
            const a = JSON.parse(JSON.stringify(tag));
            a.state = 1;
            newTags.push(JSON.parse(JSON.stringify(a)))
        }
    }
    curTags.value = newTags;
    getHeight();
}
//上传是被的回调
const loadError = (data) => {
    console.log(res)
    MessageChannel.show({
        text: data.message,
        color: 'red',
    })
    getHeight();
}

//把tag进行上传
const loadTag = (add, del) => {
    addTag_API({
        id: props.id,
        type: 0,
        tagAddIds: add.toString(),
        tagDelIds: del.toString(),
    }).then(res => {
        if (res.statusCode == 0) {
            const idArr = res.result;
            const newTags = [];
            for (let i = 0; i < idArr.length; i++) {
                const element = idArr[i];
                const tag = allTags.value.find(u => u.id == element);
                if (tag) {
                    const a = JSON.parse(JSON.stringify(tag));
                    a.state = 1;
                    newTags.push(JSON.parse(JSON.stringify(a)))
                }
            }
            curTags.value = newTags;
            getHeight();
        }
    }).catch(res => {
        console.log(res)
        MessageChannel.show({
            text: res.message,
            color: 'red',
        })
    })

}

//设置tag状态(0:可以选择,1:已经有了,2:要删除的)
const setTagState = () => {
    const allTag = allTags.value;
    const curTag = curTags.value;
    const tempTag = [];
    for (let i = 0; i < allTag.length; i++) {
        const all = JSON.parse(JSON.stringify(allTag[i]));
        let isOn = false;
        //查询当前的是否已经存在
        for (let p = 0; p < curTag.length; p++) {
            const cur = curTag[p];
            if (all.id == cur.id) {
                isOn = true;
                break;
            }
        }
        if (isOn) {
            all.state = isOn ? 1 : 0;
            all.old = true;
        }
        else {
            all.state = 0;
            all.old = false;
        }
        tempTag.push(all);
    }
    curTags.value = tempTag;

    // for (let i = 0; i < 50; i++) {
    //     curTags.value.push({
    //         id: 100 + i,
    //         title: 'emmm'
    //     })
    // }

    getHeight();
}

</script>

<style lang="scss" scoped>
.tags-content {
    position: absolute;
    top: 0;
    font-weight: 900;
    padding: 15px;
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
    height: calc(100% - 25px);

    .show {
        display: flex;
        flex-wrap: wrap;
    }

    .select {
        height: calc(100% - 35px);

        .text {
            margin: 5px 0;
            color: rgb(66, 66, 66);
            font-weight: 900;
            font-size: 18px;
        }

        .select-content {
            height: calc(100% - 30px);
            overflow-y: auto;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            align-content: flex-start;
        }
    }

    .item {
        color: white;
        border-radius: 7px;
        margin: 0 5px 5px 0;
        cursor: pointer;
        font-size: 17px;
        height: 23px;
        opacity: 0;
    }

    .item-show {
        padding: 3px 10px;
        opacity: 1;
    }
}
</style>